import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';

const ModelAgreementAccess = ({ dispatch, agreementAccessIsShow, agreementInfoAccess }) => {
  const getAgreementInfoVersion = () => {
    dispatch({
      type: 'otherApi/getAgreementInfoVersionModel',
      payload: { type: 1 },
    });
  };

  const getAgreementInfo = () => {
    dispatch({
      type: 'otherApi/getAgreementInfoModel',
      payload: { type: 1 },
    });
  };

  const handleAgreementAccess = () => {
    dispatch({
      type: 'otherApi/setAgreementAccessIsShow',
      payload: { agreementAccessIsShow: false },
    });
  };

  const handleAgreement = (agreementName) => {
    if (!agreementInfoAccess?.agreements?.length) {
      return;
    }
    let agreementDetail = null;
    for (let i = 0; i < agreementInfoAccess.agreements.length; i++) {
      if (agreementInfoAccess.agreements[i].name == agreementName) {
        agreementDetail = agreementInfoAccess.agreements[i];
      }
    }
    if (agreementDetail == null) {
      return;
    }
    dispatch({
      type: 'otherApi/setAgreementDetail',
      payload: { ...agreementDetail },
    });
    Taro.navigateTo({ url: '/mainSubPack/agreement/index' });
  };

  useEffect(() => {
    agreementAccessIsShow && getAgreementInfo();
  }, [agreementAccessIsShow]);

  useEffect(() => {
    agreementAccessIsShow === undefined && getAgreementInfoVersion();
  }, []);

  return (
    <>
      {agreementAccessIsShow == true &&
        agreementInfoAccess &&
        Object.keys(agreementInfoAccess).length > 0 && (
          <View className="moduleAgreementAccess flex-row-center-center" catchMove>
            <View className="mask"></View>
            <View className="cntbox">
              {agreementInfoAccess?.title?.length > 0 && (
                <View className="head flex-row-center-center">{agreementInfoAccess.title}</View>
              )}
              {agreementInfoAccess?.content?.parseData?.length > 0 && (
                <View className="cont">
                  {agreementInfoAccess.content.parseData.map((item) => {
                    let itemDom = null;
                    if (item?.type == 'text') {
                      itemDom = <Text>{item?.value ?? ''}</Text>;
                    } else if (item?.type == 'link') {
                      itemDom = (
                        <Text className="doc" onClick={() => handleAgreement(item.agreement)}>
                          {item?.value ?? ''}
                        </Text>
                      );
                    }
                    return itemDom;
                  })}
                </View>
              )}
              <View className="bottom flex-row-center-center" onClick={handleAgreementAccess}>
                <View className="btn flex-row-center-center">
                  {agreementInfoAccess.button ?? '我知道了'}
                </View>
              </View>
            </View>
          </View>
        )}
    </>
  );
};

export default connect(({ otherApi, loading }) => ({
  loading,
  agreementAccessIsShow: otherApi.agreementAccessIsShow,
  agreementInfoAccess: otherApi.agreementInfoAccess,
}))(ModelAgreementAccess);
